<template>
  <div v-show="visible">
    <div class="alert">
      <div class="flex">
        {{ msg }}
      </div>
      <div v-if="type==='alert'">
        <div class="btn success" @click="successEvent">确定</div>
      </div>
      <div v-else class="btns">
        <div class="btn cancel" @click="cancelEvent">取消</div>
        <div class="btn success" @click="successEvent">确定</div>
      </div>
      <div class="iconfont icon-guanbi" @click="close"></div>
    </div>
    <div class="mask" @click="closeMask"></div>
  </div>
</template>

<script>
export default {
  name: 'Alert',
  props: {
    success: {
      type: Function,
      default: () => { console.log('点击了确定') }
    },
    cancel: {
      type: Function,
      default: () => { console.log('点击了取消') }
    },
    type: {
      type: String,
      default: 'confirm'
    },
    value: {
      type: Boolean,
      default: false
    },
    msg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false
    }
  },
  watch: {
    value (val) {
      this.visible = val
    },
    visible (val) {
      this.$emit('input', val)
    }
  },
  methods: {
    close () {
      this.visible = false
    },
    closeMask () {
      if (this.type === 'alert') {
        this.close()
      }
    },
    cancelEvent () {
      this.cancel()
      this.close()
    },
    successEvent () {
      this.success()
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
$main-color: #009688;
$main-hover: darken($main-color, 5%);
$cancel-color: #999999;
$cancel-hover: darken($cancel-color, 5%);
.alert {
  width: 300px;
  height: 150px;
  position: fixed;
  background-color: #fff;
  border-radius: 6px;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -75px;
  padding: 20px 10px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}
.flex {
  flex: 1;
  padding-top: 20px;
}
.btns {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 0 20px;
}
.btn{
  width: 105px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  &.success {
    background-color: $main-color;
    &:hover {
      background-color: $main-hover;
    }
  }
  &.cancel {
    background-color: gray;
    &:hover {
      background-color: $cancel-hover;
    }
  }
}
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .iconfont {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
  }
</style>
